<template>
  <view class="mine">
    <head-index ref="headIndex" title=" " :noBgImg="true"></head-index>
    <view class="headTop">
      <view class="commonLeft">
        <view class="commonMimg">
          <u--image class="img" width="128" height="128"
            :src="userInfo.avatar ? baseApi.baseFileApi + userInfo.avatar : require('@/static/avatar.png')"
            shape="circle" style="border: 1px solid #fff;"></u--image>
        </view>
        <view class="common name">
          <text style="margin-right: 20rpx;">{{ userInfo.realName }} </text>
          <u--image v-if="userInfo.sex=='男'" class="img" width="70" height="70" :src="require('@/static/nan.png')" shape="circle"></u--image>
          <u--image v-if="userInfo.sex=='女'" class="img" width="70" height="70" :src="require('@/static/nv.png')" shape="circle"></u--image>
          <text style="margin-left: 20rpx;">{{ userInfo.username }} </text>
        </view>
      </view>
      <view class="commonRight" @click="goInfo">
        <u--image class="img" width="40" height="40" :src="require('@/static/setting.png')" shape="circle"></u--image>
        <text class="text">设置</text>
      </view>
    </view>
    <view class="container">
      <view class="cell-group">
        <view class="cell" v-for="item in list" :key="item.title" hover-class="hover-view" hover-stay-time="150"
          @click="cellClickHandle(item)">
          <view class="content">
            <view class="left">
              <image class="icon" :src="item.iconName"></image>
              <text class="title">{{ item.title }}</text>
            </view>
            <view class="right">
              <u-badge v-if="item.budge && count" type="error" max="99" :value="count"></u-badge>
              <u-icon name="arrow-right" size="32" color="#606266"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import headIndex from '@/components/headIndex/index.vue'
import baseApi from "@/config/baseApi.js";
import { myUser } from "@/api/data.js";
import { mapActions } from "vuex";
import storage from "@/utils/storage";
export default {
  components: { headIndex },
  data() {
    return {
      list: [
        // {
        //   title: "我的信息",
        //   // iconName: require('@/static/cooperate/mine.png'),
        //   budge: false,
        //   to: "/pages/me/userInfo",
        // },
        {
          title: "我的申请",
          budge: false,
          iconName: require('@/static/image/child1.png'),
          to: "/pages/me/myApplication",
        },
        {
          title: "我的活动",
          iconName: require('@/static/image/classify_ac.png'),
          budge: false,
          to: "/pages/me/myActivity",
        },
        {
          title: "我的收藏",
          iconName: require('@/static/image/child2.png'),
          budge: false,
          to: "/pages/me/myActivity2",
        },
        {
          title: "退出登录",
          iconName: require('@/static/image/child3.png'),
          exit: true,
        },
      ],
      userInfo: {
        realName: '姓名1',
        username: '用户名1',
        sex: '男',
      },
      baseApi: baseApi,
      count: ''
    }
  },
  onLoad() {
    let token = storage.getToken();
    if (!token) {
      // 未登录
      uni.showModal({
        title: '您还未登录',
        content: '是否先进行登录？',
        cancelText: '取消',
        confirmText: '确定',
        success: function (res) {
          if (res.confirm) {
            setTimeout(() => {
              uni.navigateTo({ url: '/pages/login/login' })
            }, 2000)
            // 用户点击确定按钮的逻辑处理
          } else if (res.cancel) {
            // 用户点击取消按钮的逻辑处理
          }
        }
      });
    }
  },
  mounted() {
    // this.userInfo = store.getters.userInfo
    this.myUser()
  },
  methods: {
    ...mapActions(["logout"]),
    myUser() {
      myUser().then((res) => {
        console.log('res', res);
        if (res.data) {
          this.userInfo = res.data;
        }

      });
    },
    goInfo(){
      uni.navigateTo({ url: '/pages/me/userInfo' });
    },
    cellClickHandle(item) {
      if (item.to) {
        uni.navigateTo({ url: item.to });
      } else {
        this.logout();
        this.$nextTick(() => {
          uni.reLaunch({ url: "/pages/login/login" });
        });
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  box-sizing: border-box;
  box-sizing: border-box;
  // background: linear-gradient(to bottom, #fecb4b, #F5F5F5);
  overflow: hidden;
  height: calc(100vh - 104rpx);

  /deep/.u-sticky {
    background-color: #ffcf60 !important;
  }

  .headTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #ffcf60 !important;
    box-sizing: border-box;
    padding-top: 20rpx;
    padding-right: 20rpx;

    .commonLeft {
      .commonMimg {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 20rpx;
        .img {
          border: 1px solid #fff;
        }
      }
      .name{
        width: 100%;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .commonRight {
      width: 165rpx;
      height: 63rpx;
      border-radius: 40rpx;
      background-color: rgba(0, 0, 0, 0.34);
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 30rpx;
      box-sizing: border-box;

      .text {
        color: #fff;
        font-size: 24rpx;
      }
    }


  }



  .container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
    .cell-group {
      width: 100%;
      margin-top: 40rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10rpx;
      .hover-view {
        background-color: #eeeeee59;
      }

      .cell {
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        // border-radius: 16rpx;
        // background-color: #fff;
        // margin-bottom: 32rpx;
        // box-shadow: 0px 0px 8px 0 #564d4d30;
        border-bottom: 1px solid #564d4d30;
        // &:last-child {
        // 	border: none;

        // 	.content {
        // 		border: none
        // 	}
        // }

        .content {
          width: 100%;
          height: 112rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // font-size: 28rpx;
          // line-height: 76rpx;
          // padding: 10rpx;
          // border-bottom: 1px solid #eee;

          .left {
            width: 100%;
            display: flex;
            align-items: center;

            .icon {
              width: 48rpx;
              height: 48rpx;
            }

            .title {
              margin-left: 32rpx;
              color: #0E1613;
              font-size: 32rpx;
            }
          }

          .right {
            display: flex;
            align-items: center;
          }
        }
      }
    }

  }
}
</style>
